<template>
	<view class="wrap" ref="backTop">
		<view class="search-bar">
			<view class="search-bar-box1" @click="Personaddress()">
				<image src="../../static/定位.png"></image>
				<view>{{ location }}</view>
			</view>
			<view class="search-bar-box2">
				<image class="search-span" src="../../static/搜索框.png" />
				<view @click="toSearchShow">请输入商户或商品信息</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<liu-slide-img :list="list" :autoplay="true" :interval="3000" @click="clickToStore"></liu-slide-img>
		<!-- 分类 -->
		<view class="type">
			<view class="type-box" @click="toFood">
				<image class="type-img" src="../../static/美食.png"></image>
				<view class="introduce">美食</view>
			</view>
			<view class="type-box" @click="goToOil">
				<image class="type-img" src="../../static/加油站.png"></image>
				<view class="introduce">加油站</view>
			</view>
			<view class="type-box" @click="toMinSu">
				<image class="type-img" src="../../static/民宿.png"></image>
				<view class="introduce">民宿</view>
			</view>
			<view class="type-box" @click="toCouponCenter">
				<image class="type-img" src="../../static/优惠卷.png"></image>
				<view class="introduce">优惠券</view>
			</view>
		</view>
		<!-- 店铺推荐 -->
		<view class="recommend">
			<view @click="changeState(1)" class="items" :class="[state == 1 ? 'active' : '']">美食</view>
			<view @click="changeState(2)" class="items" :class="[state == 2 ? 'active' : '']">民宿</view>
			<view @click="changeState(3)" class="items" :class="[state == 3 ? 'active' : '']">农产品</view>
			<view @click="changeState(4)" class="items" :class="[state == 4 ? 'active' : '']">加油站</view>
		</view>
		<view class="showTips">
			<view @click="SelectState(1)" class="showTips-type" :class="[selectState == 1 ? 'active' : '']">离我最近</view>
			<view @click="SelectState(2)" class="showTips-type" :class="[selectState == 2 ? 'active' : '']">销量最高</view>
			<view @click="SelectState(3)" class="showTips-type" :class="[selectState == 3 ? 'active' : '']">评分最高</view>
		</view>
		<!-- 店铺排布 -->
		<view class="end" v-for="(v, index) in List1" :key="index" @click="goToShopDetail(v)">
			<image :src="v.storePhoto"></image>
			<view>
				<view class="end-name">{{ v.storeName }}</view>
				<view class="end-distance">
					<uni-section title="基本用法" type="line" padding>
						<uni-rate size="18" :value="v.score" :readonly="true" />
					</uni-section>
					<view>距离{{ v.distance }}km</view>
				</view>
				<view v-if="storeCategory == 1 || storeCategory == 2" class="elseText">已售：{{ v.orderNum }} 单</view>
				<view v-if="storeCategory == 4" class="elseText">已加油：{{ v.orderNum }} L</view>
			</view>
		</view>
		<uv-back-top :scroll-top="scrollTop"></uv-back-top>
	</view>
</template>

<script>
import http from '@/util/http.js';
export default {
	data() {
		return {
			timer: null,
			scrollTop: 0,
			state: 1,
			selectState: 1,
			score: 0,
			orderNum: 0,
			storeCategory: 1,
			list: [
				{
					src: 'https://bpic.588ku.com/back_origin_min_pic/20/11/05/4d458bd9d574905c40cd21f994065606.jpg'
				},
				{
					src: 'https://ts1.cn.mm.bing.net/th/id/R-C.bcb9bdfe429fb96f76ab2611a075da3f?rik=hC4sygapl4R3Fw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50118%2f8567.jpg_wh1200.jpg&ehk=EiyI0xeno78JsUa%2fsExBSxYWOIYzJ6ek%2fLlgofjFl%2fQ%3d&risl=&pid=ImgRaw&r=0'
				},
				{
					src: 'https://img95.699pic.com/photo/50095/2639.jpg_wh860.jpg'
				}
			],
			location: '',
			List1: [],
			List2: [],
			UserLocation: {
				latitude: 30.779795,
				longitude: 103.85457
			}
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		// #ifdef APP-NVUE
		this.scrollTop = e.detail.scrollTop;
		// #endif
	},
	onLoad() {
		this.getUserNearStore();
	},
	onShow() {
		this.getUserNearStore();
		this.timer = setInterval(function () {
			let that = this;
			wx.getFuzzyLocation({
				type: 'wgs84',
				success(res) {
					const latitude = res.latitude;
					const longitude = res.longitude;
				}
			});
		}, 180000);
	},
	onHide() {
		clearInterval(this.timer);
		this.timer = null;
	},

	methods: {
		goToShopDetail(v) {
			uni.navigateTo({
				url: '/pages/shop/store?id=' + v.id
			});
		},
		// // 美食跳转
		// toFood() {
		// 	uni.switchTab({
		// 		url: '/pages/shop/shop'
		// 	});
		// },

		// // 跳转民宿
		// toMinSu() {
		// 	uni.navigateTo({
		// 		url: '/pages/shop/shop'
		// 	});
		// },

		// 优惠券中心跳转
		toCouponCenter() {
			uni.navigateTo({
				url: '/pages/coupon/coupon-center'
			});
		},

		toSearchShow() {
			uni.navigateTo({
				url: '/pages/searchSow/searchShow'
			});
		},
		goToOil() {
			uni.navigateTo({
				url: '/pages/oil/oil'
			});
		},

		// 更改大分类标签
		changeState(state) {
			if (state == 1) {
				this.storeCategory = 1;
			} else if (state == 2) {
				this.storeCategory = 2;
			} else if (state == 3) {
				this.storeCategory = 3;
			} else {
				this.storeCategory = 4;
			}
			this.state = state;
			this.getUserNearStore();
		},

		// 更改小分类标签
		SelectState(state) {
			if (state == 1) {
				this.score = 0;
				this.orderNum = 0;
			} else if (state == 2) {
				this.score = 0;
				this.orderNum = 2;
			} else {
				this.score = 1;
				this.orderNum = 0;
			}
			this.getUserNearStore();
			this.selectState = state;
		},

		//获取附近商家信息
		getUserNearStore() {
			http({
				url: '/store/getNearStore',
				data: {
					latitude: this.UserLocation.latitude,
					longitude: this.UserLocation.longitude,
					storeCategory: this.storeCategory,
					score: this.score,
					orderNum: this.orderNum
				},
				success: (res) => {
					this.List1 = res.data.data;
				}
			});
		},

		// 显示个人信息
		Personaddress() {
			let that = this;
			wx.chooseLocation({
				type: 'wgs84',
				success(res) {
					that.location = res.address;
					that.UserLocation.latitude = res.latitude;
					that.UserLocation.longitude = res.longitude;
					that.addList = res;
					uni.setStorage({
						key: 'userLocation',
						data: [res]
					});
				}
			});
		},

		// 插入附近商家信息
		// getAddress() {
		// 	console.log(this.addList);
		// 	http({
		// 		url: '/store/insertOilStore',
		// 		data: {
		// 			storeName: this.addList.name,
		// 			storeAddress: this.addList.address,
		// 			latitude: this.addList.latitude,
		// 			longitude: this.addList.longitude
		// 		},
		// 		success: (res) => {
		// 			console.log(1);
		// 		}
		// 	});
		// },
		searchMessage(e) {
			console.log(e);
			this.location = e;
		},
		//点击轮播图并跳转
		clickToStore(e) {
			console.log('点击轮播', e);
		}
	}
};
</script>

<style>
body {
	background-color: #f0eff4;
}
/* 底部店铺详细推荐 */
.end {
	display: flex;
	background-color: #ffffff;
	margin: 20rpx;
}
.end image {
	width: 200rpx;
	height: 150rpx;
	margin: 30rpx;
}
.end-distance {
	display: flex;
}
.end-name {
	margin-top: 20rpx;
	text-align: center;
	height: 60rpx;
}
.end-distance view {
	margin-right: 20rpx;
	font-size: 15px;
}
.elseText {
	margin-top: 10rpx;
	margin-bottom: 20rpx;
	text-align: left;
}
/*分类推荐 */
.recommend {
	margin-top: 20rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
	display: flex;
	background-color: #ffffff;
}
/* 推荐大标签 */
.items {
	width: 155rpx;
	height: 60rpx;
	margin-top: 10rpx;
	margin-left: 20rpx;
	font-size: 18px;
	text-align: center;
}
.items.active {
	color: red;
}
/* 推荐理由小标签 */
.showTips {
	display: flex;
	margin-top: 10rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
}
.showTips-type {
	text-align: center;
	width: 200rpx;
	height: 40rpx;
	line-height: 40rpx;
	margin-left: 22.5rpx;
	font-size: 25rpx;
	background-color: #ffffff;
}
.showTips-type.active {
	color: blue;
}
/* 分类 */
.type {
	display: flex;
	width: 690rpx;
	height: 200rpx;
	margin-top: 15rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	background-color: #ffffff;
}
.type-box {
	width: 120rpx;
	margin-left: 42rpx;
}
.type-img {
	margin-top: 20rpx;
	width: 120rpx;
	height: 120rpx;
}
.introduce {
	margin-top: -15rpx;
	text-align: center;
	width: 120rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 26rpx;
}
/* 顶部 */
.search-bar {
	display: flex;
	height: 70rpx;
	text-align: center;
	margin-bottom: 10rpx;
}
/* 定位 */
.search-bar-box1 {
	margin-left: 1%;
	text-align: center;
	width: 38%;
	display: flex;
	height: 60rpx;
	border: 5rpx solid #00a8cc;
	border-radius: 10rpx;
}

.search-bar-box1 view {
	text-align: left;
	margin-left: 10rpx;
	line-height: 60rpx;
	height: 60rpx;
	font-size: 30rpx;
	color: #7f7f81;
}
/* 搜索框 */
.search-bar-box2 {
	text-align: center;
	width: 58%;
	margin-left: 2%;
	margin-right: 1%;
	display: flex;
	height: 60rpx;
	border: 5rpx solid #00a8cc;
	border-radius: 10rpx;
}
.search-bar-box2 view {
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	margin-left: 20rpx;
	text-align: left;
	font-size: 25rpx;
}
/* 搜索图标 */
.search-bar image {
	width: 46rpx;
	height: 46rpx;
	margin-top: 7rpx;
	margin-left: 7rpx;
}

.Carousel {
	margin-top: 20rpx;
}
.search-bar {
	display: flex;
	height: 60rpx;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	text-align: center;
	margin-bottom: 15rpx;
}
.search-bar-box {
	width: 100%;
	display: flex;
	margin-top: 10rpx;
	/* width: 620rpx; */
	height: 60rpx;
	border: 5rpx solid #00a8cc;
	border-radius: 50rpx;
}
/* 搜索图标 */
.search-bar image {
	width: 80rpx;
	height: 48rpx;
	margin-top: 6rpx;
	margin-left: 30rpx;
}
/* 搜索框 */
.search-text {
	text-align: center;
	margin-left: 10rpx;
	line-height: 60rpx;
	height: 60rpx;
	font-size: 30rpx;
	color: black;
}

/* 图标 */
.search-bar image {
	width: 40rpx;
	height: 40rpx;
	margin-top: 10rpx;
	margin-left: 5rpx;
}
</style>
<style lang="scss" scoped>
// 到达底部出现回到顶部按钮
.wrap {
	height: 100%;
}
.item {
	padding: 24rpx 0;
	color: #222;
	font-size: 28rpx;
}
</style>
